<template>
  <div class="list-node-main">
    <div v-if="mode==1">
      <hover-carousel
        :data="data"
        @clickItem="clickItem"
      ></hover-carousel>
    </div>
    <div v-else-if="mode==2">
      <ant-carousel
        :data="data"
        @clickItem="clickItem"
      ></ant-carousel>
    </div>
    <div v-else-if="mode==3">
      <parallax-depth
        :data="data"
        @clickItem="clickItem"
      ></parallax-depth>
    </div>
    <div v-else-if="mode==4">
      <sequence-no
        :data="data"
        @clickItem="clickItem"
      ></sequence-no>
    </div>
    <div v-else>
      <sequence-no
        :data="data"
        @clickItem="clickItem"
      ></sequence-no>
    </div>
  </div>
</template>

<script>
import HoverCarousel from './Models/HoverCarousel'
import AntCarousel from './Models/AntCarousel'
import ParallaxDepth from './Models/ParallaxDepth'
import SequenceNo from './Models/SequenceNo'

export default {
  components:{
    HoverCarousel,
    AntCarousel,
    ParallaxDepth,
    SequenceNo
  },
  props:{
    mode:{
      type:Number,
      default:1
    },
    data:{
      type:Object,
      default:()=>{}
    }
  },
  methods:{
    clickItem(item){
      this.$emit("clickItem",item)
    }
  }
}
</script>

<style>
.list-node-main {
  /* height: 90vh; */
  min-height: 100vh;
}
</style>